<template>
  <div class="ge_dan" v-loading="domLoading2">
    <div class="ge_dan_top">
      <div class="ga_dan_top_left">
        <div class="ga_dan_top_left_img">
          <el-image lazy :src="albumInfo.album.picUrl" />
        </div>
      </div>
      <div class="ga_dan_top_right">
        <div class="ga_dan_top_right_title">
          <div class="ga_dan_top_right_title_left">专辑</div>
          <div class="ga_dan_top_right_title_right">
            {{ albumInfo.album.name }}
            <span style="color: #909399;"
              >({{ albumInfo.album.alias[0] }})</span
            >
          </div>
        </div>
        <div class="ga_dan_top_right_bofang" @click="singAll(albumInfo.songs)">
          <div class="ga_dan_top_right_bofang_other">
            <i class="el-icon-caret-right" />
          </div>
          <div class="ga_dan_top_right_bofang_text">播放全部</div>
        </div>
        <div class="zhuanJi_geShou">
          <div class="zhuanJi_geShou_left">歌手:</div>
          <div
            class="zhuanJi_geShou_right"
            @click="jumpGeShou(albumInfo.album.artist.id)"
          >
            {{ albumInfo.album.artist.name }}
          </div>
        </div>
        <div class="zhuanJi_time">
          <div class="zhuanJi_time_left">时间:</div>
          <div class="zhuanJi_time_right">
            {{
              `${new Date(
                albumInfo.album.publishTime
              ).getFullYear()}-${new Date(
                albumInfo.album.publishTime
              ).getMonth()}-${new Date(albumInfo.album.publishTime).getDate()}`
            }}
          </div>
        </div>
      </div>
    </div>
    <div class="ge_dan_three">
      <div class="ge_dan_three_title">
        <div
          class="ge_dan_three_title_inside"
          v-for="(item, index) in title"
          :key="index"
        >
          <div
            @click="changeStyle(index)"
            :class="{ ge_dan_three_title_inside_active: active == index }"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="ge_dan_three_contact">
        <div class="singList" v-if="active == 0">
          <div class="singList_title" style="margin-bottom: 15px">
            <div class="singList_title_write"></div>
            <div class="singList_title_caozuo">操作</div>
            <div class="singList_title_biaoti">标题</div>
            <div class="singList_title_geshou">歌手</div>
            <div class="singList_title_zhuanji">专辑</div>
            <div class="singList_title_shijian">时间</div>
          </div>
          <div
            class="singList_title"
            v-for="(item, index) in albumInfo.songs"
            :key="item.id"
          >
            <div class="singList_title_write">
              {{(index + 1) &lt; 10 ? "0" + (index + 1) : index + 1  }}
            </div>
            <div class="singList_title_caozuo">
              <i
                @click="downMP3(item.id, item.name)"
                style="font-size: 16px"
                class="el-icon-download"
              />
            </div>
            <div
              @click="boFangSing(item.name, item.ar, item.al.picUrl, item.id)"
              class="singList_title_biaoti"
              style="
                color: black;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
            >
              {{ item.name }}
            </div>
            <div
              class="singList_title_geshou"
              style="
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
            >
              <span v-for="(childItem, index) in item.ar" :key="childItem.id">
                {{
                  (index == item.ar.length - 1 && childItem.name) ||
                    childItem.name + "/"
                }}
              </span>
            </div>

            <div
              class="singList_title_zhuanji"
              style="
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
            >
              {{ item.al.name }}
            </div>
            <div class="singList_title_shijian">01:38</div>
          </div>
        </div>
        <PingLun
          @changePage="changePage"
          :resComments="resComments"
          :domLoading="domLoading"
          v-else-if="active == 1"
        />
        <div class="zhuangJi_xiangQing" v-else>
          <div class="zhuangJi_xiangQing_title">
            专辑详情
          </div>
          <div v-if="albumInfo.album.description.length == 0">
            暂无专辑详情
          </div>
          <div v-else class="zhuangJi_xiangQing_contact">
            <div
              class="zhuangJi_xiangQing_contact_inside"
              v-for="(item, index) in albumInfo.album.description"
              :key="index"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      title="下载音质选择"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <el-radio-group v-model="fileId" v-if="isSingDown">
        <div v-for="(item, index) in toneQuality" :key="index" class="dialog">
          <el-radio :label="item.id">{{ item.name }}</el-radio>
        </div>
      </el-radio-group>
      <div class="noSing" v-else>该歌曲不可下载</div>
      <div class="buttons">
        <div
          class="buttons_inside"
          :style="{
            justifyContent: isSingDown == true ? 'space-between' : 'center',
          }"
        >
          <el-button v-show="isSingDown" round class="quereng" @click="dowmFile"
            >确认</el-button
          >
          <el-button round class="quxiao" @click="centerDialogVisible = false"
            >取消</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { boFangSing, downFile } from "../../../common/mixin/commonJs";
import {
  commentAlbum,
  album,
  albumDetailDynamic,
  songUrl,
} from "../../../api/index";
const PingLun = () => import("../../../components/pingLun.vue");
export default {
  mixins: [boFangSing, downFile],
  components: {
    PingLun,
  },
  created() {
    this.domLoading2 = true;
    album({ id: this.$route.query.id }).then((res) => {
      console.log(res);
      this.albumInfo = res;
      this.albumInfo.album.description = this.albumInfo.album.description
        .replace(/\n/g, "<br/>")
        .split("<br/>");
      console.log(this.albumInfo);
      albumDetailDynamic({
        id: this.$route.query.id,
      }).then((res) => {
        this.albumDetailDynamic = res;
        this.$set(
          this.title,
          1,
          `评论(${this.albumDetailDynamic.commentCount})`
        );
        commentAlbum({
          id: this.$route.query.id,
        }).then((res) => {
          this.resComments = res;
          this.domLoading2 = false;
        });
      });
    });
  },
  data() {
    return {
      isSingDown: true,
      fileId: 3,
      centerDialogVisible: false,
      singInfo: {
        id: null,
        name: "",
      },
      domLoading: false,
      domLoading2: false,
      resComments: {},
      albumDetailDynamic: {},
      albumInfo: {},
      title: ["歌曲列表", "评论", "专辑详情"],
      active: 0,
      toneQuality: [
        {
          id: 1,
          name: "标准 (128kbit/s)",
        },
        {
          id: 2,
          name: "较高 (192kbit/s)",
        },
        {
          id: 3,
          name: "极高 (320kbit/s)",
        },
      ],
    };
  },
  methods: {
    singAll(singList) {
      singList.forEach((item) => {
        this.boFangSing(item.name, item.ar, item.al.picUrl, item.id);
      });
    },
    jumpGeShou(id) {
      this.$router.push({
        path: "/geShou",
        query: {
          id,
        },
      });
    },
    changeStyle(index) {
      this.active = index;
    },
    changePage(e) {
      this.domLoading = true;
      commentAlbum({
        id: this.$route.query.id,
        offset: e * 20,
      }).then((res) => {
        this.resComments = res;
        this.domLoading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../common/css/commonStyle";
.ge_dan {
  width: 95%;
  .el-dialog__body {
    padding: 0px 20px 20px 20px;
    .dialog {
      margin-bottom: 15px;
      cursor: pointer;
    }
    .noSing {
      @include flex;
      height: 40px;
    }
    .buttons {
      @include flex;
      .buttons_inside {
        width: 60%;
        display: flex;
        .quereng {
          background: $wangYiYunColor;
          color: white;
        }
        .quereng:hover {
          background: #c20117;
          color: white;
        }
        .quxiao:hover {
          background: rgba(240, 233, 233, 0.932);
          color: #606266;
        }
      }
    }
  }
  .ge_dan_top {
    width: 100%;
    display: flex;
    padding: 30px 10px;
    justify-content: space-between;
    .ga_dan_top_left {
      width: 25%;
      .ga_dan_top_left_img {
        width: 100%;
        height: 190px;
        .el-image {
          @include img_size;
          border-radius: 5px;
        }
      }
    }
    .ga_dan_top_right {
      width: 73%;
      .ga_dan_top_right_title {
        //width: 52%;
        display: flex;
        align-items: center;
        //justify-content: space-between;
        margin-bottom: 20px;

        .ga_dan_top_right_title_left {
          margin-right: 10px;
          width: 35px;
          height: 20px;
          border: 1px solid $wangYiYunColor;
          @include flex;
          font-size: 13px;
          color: $wangYiYunColor;
        }

        .ga_dan_top_right_title_right {
          font-size: 22px;
          font-weight: 900;
        }
      }
      .ga_dan_top_right_bofang {
        margin-bottom: 15px;
        display: flex;
        justify-content: space-between;
        width: 150px;
        height: 33px;
        //background-color: pink;
        color: white;
        cursor: pointer;

        .ga_dan_top_right_bofang_other {
          width: 26%;
          height: 100%;
          background: $wangYiYunColor;
          border-top-left-radius: 50px;
          border-bottom-left-radius: 50px;
          @include flex;

          .el-icon-caret-right {
            color: white;
            font-size: 23px;
          }
        }

        .ga_dan_top_right_bofang_text {
          display: flex;
          align-items: center;
          height: 100%;
          color: white;
          background: $wangYiYunColor;
          width: 74%;
          border-top-right-radius: 50px;
          border-bottom-right-radius: 50px;
        }
      }
      .zhuanJi_geShou {
        display: flex;
        font-size: 14px;
        margin-bottom: 15px;
        .zhuanJi_geShou_left {
          margin-right: 5px;
        }
        .zhuanJi_geShou_right {
          color: #66b1ff;
          cursor: pointer;
        }
      }
      .zhuanJi_time {
        display: flex;
        font-size: 14px;
        .zhuanJi_time_left {
          margin-right: 5px;
        }
        .zhuanJi_time_right {
          color: #909399;
          cursor: pointer;
        }
      }
    }
  }
  .ge_dan_three {
    width: 100%;
    padding: 30px 10px;
    .ge_dan_three_title {
      width: 40%;
      display: flex;
      // height: 10px;
      // background: yellow;
      justify-content: space-around;
      .ge_dan_three_title_inside {
        @include flex;
        // width: 12%;
        font-size: 18px;
        font-weight: 200;
        //background: yellow;
        cursor: pointer;
        .ge_dan_three_title_inside_active {
          cursor: default;
          //width: 80px;
          font-size: 22px;
          font-weight: 800;
          border-bottom: 4px solid $wangYiYunColor;
        }
      }
    }
    .ge_dan_three_contact {
      width: 100%;
      .singList {
        width: 93%;
        margin: auto;
        padding-top: 30px;
        padding-bottom: 30px;
        .singList_title {
          display: flex;
          height: 30px;
          font-size: 14px;
          color: gray;
          .singList_title_write {
            width: 8%;
            height: 100%;
            //background: #66b1ff;
          }
          .singList_title_caozuo {
            width: 10%;
            height: 100%;
            //background: red;
            .el-icon-download {
              cursor: pointer;
            }
          }
          .singList_title_biaoti {
            width: 30%;
            height: 100%;
            //background: green;
            cursor: pointer;
          }
          .singList_title_geshou {
            width: 15%;
            height: 100%;
            //background: pink;
          }
          .singList_title_zhuanji {
            width: 20%;
            height: 100%;
            margin-right: 10px;
            //background: yellow;
          }
          .singList_title_shijian {
            width: 10%;
            height: 100%;
            //background: orange;
          }
        }
      }
      .zhuangJi_xiangQing {
        width: 97%;
        margin: auto;
        padding-top: 30px;
        padding-bottom: 30px;
        font-weight: 600;
        .zhuangJi_xiangQing_title {
          margin-bottom: 15px;
        }
        .zhuangJi_xiangQing_contact {
          width: 90%;
          margin: auto;
          font-size: 14px;
          color: #909399;
          font-weight: 200;
          .zhuangJi_xiangQing_contact_inside {
            margin-bottom: 10px;
          }
        }
      }
    }
  }
}
</style>
